import { LitElement, PropertyValueMap, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("atm-preview")
export class Preview extends LitElement {
  static styles = css`
    :host {
      display: flex;
      flex-direction: column;
      min-width: 200px;
      min-height: 150px;
      background-color: var(--el-bg-color-page);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      margin: 0 auto;
      width: 80%;
    }

    main {
      padding: 10px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    .full-width {
      grid-column: 1 / -1;
    }

    head,
    .head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px;
      height: 56px;
      background-color: var(--el-menu-bg-color);
      color: var(--el-menu-text-color);

      h1 {
        margin-left: 10px;
        color: var(--el-menu-text-color);
      }

      nav {
        display: flex;
        gap: 10px;
        padding: 0 10px;

        span {
          height: 56px;
          line-height: 56px;
          width: 100px;
          text-align: center;
        }

        span:hover {
          background-color: var(--el-menu-hover-bg-color);
          color: var(--el-menu-hover-text-color);
        }

        span.active {
          color: var(--el-menu-active-color);
        }
      }
    }

    p {
      color: var(--text-secondary-color);
    }

    h1 {
      color: var(--text-color);
    }

    h1.primary {
      color: var(--el-text-color-primary);
    }

    button.primary {
      border: 1px solid var(--el-color-primary);
      padding: 10px;
      margin: 10px 0;
      border-radius: 4px;
      background-color: var(--el-color-primary);
      color: var(--el-color-white);
    }

    button.primary.plain {
      color: var(--el-color-primary);
      background-color: var(--el-color-primary-light-9);
      border-color: var(--el-color-primary-light-5);

      &:hover {
        color: var(--el-color-white);
        background-color: var(--el-color-primary);
        border-color: var(--el-color-primary);
      }
    }

    input.primary {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid var(--el-color-primary);
      border-radius: 4px;
      box-sizing: border-box;
    }

    h1.secondary {
      color: var(--secondary-color);
    }

    button.secondary {
      border: 1px solid var(--secondary-color);
      padding: 10px;
      margin: 10px 0;
      border-radius: 4px;
      background-color: var(--secondary-color);
      color: var(--el-color-white);
    }

    button.secondary.plain {
      color: var(--el-color-secondary);
      background-color: var(--el-color-secondary-light-9);
      border-color: var(--el-color-secondary-light-5);

      &:hover {
        color: var(--el-color-white);
        background-color: var(--el-color-secondary);
        border-color: var(--el-color-secondary);
      }
    }


    .item {
      margin: 10px 0;
      background-color: var(--el-bg-color);
      color: var(--text-color);
      padding: 10px;
      border-radius: var(--item-border-radius);
      box-shadow: var(--item-box-shadow);
    }

    input.secondary {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid var(--secondary-color);
      border-radius: 4px;
      box-sizing: border-box;
    }

    h1.success {
      color: var(--el-color-success);
    }

    button.success {
      border: 1px solid var(--el-color-success);
      padding: 10px;
      margin: 10px 0;
      border-radius: 4px;
      background-color: var(--el-color-success);
      color: var(--el-color-white);
    }

    input.success {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid var(--el-color-success);
      border-radius: 4px;
      box-sizing: border-box;
    }

    button.success.plain {
      color: var(--el-color-success);
      background-color: var(--el-color-success-light-9);
      border-color: var(--el-color-success-light-5);

      &:hover {
        color: var(--el-color-white);
        background-color: var(--el-color-success);
        border-color: var(--el-color-success);
      }
    }


    h1.warning {
      color: var(--el-color-warning);
    }

    button.warning {
      border: 1px solid var(--el-color-warning);
      padding: 10px;
      margin: 10px 0;
      border-radius: 4px;
      background-color: var(--el-color-warning);
      color: var(--el-color-white);
    }

    button.warning.plain {
      color: var(--el-color-warning);
      background-color: var(--el-color-warning-light-9);
      border-color: var(--el-color-warning-light-5);

      &:hover {
        color: var(--el-color-white);
        background-color: var(--el-color-warning);
        border-color: var(--el-color-warning);
      }
    }


    input.warning {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid var(--el-color-warning);
      border-radius: 4px;
      box-sizing: border-box;
    }
    h1.error {
      color: var(--el-color-error);
    }

    button.error {
      border: 1px solid var(--el-color-error);
      padding: 10px;
      margin: 10px 0;
      border-radius: 4px;
      background-color: var(--el-color-error);
      color: var(--el-color-white);
    }

    input.error {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid var(--el-color-error);
      border-radius: 4px;
      box-sizing: border-box;
    }

    button.error.plain {
      color: var(--el-color-error);
      background-color: var(--el-color-error-light-9);
      border-color: var(--el-color-error-light-5);

      &:hover {
        color: var(--el-color-white);
        background-color: var(--el-color-error);
        border-color: var(--el-color-error);
      }
    }

     h1.info {
      color: var(--el-color-info);
    }

    button.info {
      border: 1px solid var(--el-color-info);
      padding: 10px;
      margin: 10px 0;
      border-radius: 4px;
      background-color: var(--el-color-info);
      color: var(--el-color-white);
    }

    input.info {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: 1px solid var(--el-color-info);
      border-radius: 4px;
      box-sizing: border-box;
    }

    button.info.plain {
      color: var(--el-color-info);
      background-color: var(--el-color-info-light-9);
      border-color: var(--el-color-info-light-5);

      &:hover {
        color: var(--el-color-white);
        background-color: var(--el-color-info);
        border-color: var(--el-color-info);
      }
    }


    .primary {
      color: var(--el-text-color-primary);
    }

    .secondary {
      color: var(--el-text-color-secondary);
    }

    .regular {
      color: var(--el-text-color-regular);
    }

    .placeholder {
      color: var(--el-text-color-placeholder);
    }

    .disabled {
      color: var(--el-text-color-disabled);
    }

    .block {
      width: 20px;
      height: 20px;
    }
  `;

  @property({ type: String })
  description: String = "这是一个示例网站";

  render() {
    return html`
      <div class="head">
        <h1>示例网站</h1>
        <nav>
          <span>菜单样例</span>
          <span>悬浮查看效果</span>
          <span class="active">选中效果</span>
        </nav>
      </div>
      <main>
        <div class="item full-width">
          <h1>文本内容</h1>
          <p class="primary">${this.description}</p>
          <p class="primary">着重文本颜色（点击对话菜单可返回对话界面继续让AI调整）</p>
          <p class="regular">主体文本颜色（点击导出可以导出可用于项目的css文件）</p>
          <p class="secondary">次要文本颜色</p>
          <p class="placeholder">用于占位符的文本颜色</p>
          <p class="disabled">不可用文本颜色</p>
        </div>
        <div class="item">
          <p style="color:var(--el-color-primary)">主要元素颜色示例</p>
          <div style="display:flex">
            <span
              class="block"
              style="background-color:var(--el-color-primary-dark-2)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-primary)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-primary-light-3)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-primary-light-5)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-primary-light-7)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-primary-light-8)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-primary-light-9)"
            ></span>
          </div>
          <button class="primary">按钮</button>
          <button class="primary plain">按钮</button>
          <input type="text" placeholder="输入框" class="primary" />
        </div>
        <div class="item">
          <p style="color:var(--el-color-success)">成功元素颜色示例</p>
          <div style="display:flex">
            <span
              class="block"
              style="background-color:var(--el-color-success-dark-2)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-success)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-success-light-3)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-success-light-5)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-success-light-7)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-success-light-8)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-success-light-9)"
            ></span>
          </div>
          <button class="success">按钮</button>
          <button class="success plain">按钮</button>
          <input type="text" placeholder="输入框" class="success" />
        </div>
        <div class="item">
          <p style="color:var(--el-color-warning)">警告元素颜色示例</p>
          <div style="display:flex">
            <span
              class="block"
              style="background-color:var(--el-color-warning-dark-2)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-warning)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-warning-light-3)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-warning-light-5)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-warning-light-7)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-warning-light-8)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-warning-light-9)"
            ></span>
          </div>
          <button class="warning">按钮</button>
          <button class="warning plain">按钮</button>
          <input type="text" placeholder="输入框" class="warning" />
        </div>
        <div class="item">
          <p style="color:var(--el-color-error)">警告元素颜色示例</p>
          <div style="display:flex">
            <span
              class="block"
              style="background-color:var(--el-color-error-dark-2)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-error)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-error-light-3)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-error-light-5)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-error-light-7)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-error-light-8)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-error-light-9)"
            ></span>
          </div>
          <button class="error">按钮</button>
          <button class="error plain">按钮</button>
          <input type="text" placeholder="输入框" class="error" />
        </div>
        <div class="item">
          <p style="color:var(--el-color-info)">信息元素颜色示例</p>
          <div style="display:flex">
            <span
              class="block"
              style="background-color:var(--el-color-info-dark-2)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-info)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-info-light-3)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-info-light-5)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-info-light-7)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-info-light-8)"
            ></span>
            <span
              class="block"
              style="background-color:var(--el-color-info-light-9)"
            ></span>
          </div>
          <button class="info">按钮</button>
          <button class="info plain">按钮</button>
          <input type="text" placeholder="输入框" class="info" />
        </div>
      </main>
    `;
  }
}
